<template>
  <div class="dashboard-container">
    <div class="setContent">
      <div class="title">更换主管理员</div>
      <div class="cont">
        <div v-if="step === 1" class="">
          <div class="item">
            <div>当前管理员：</div>
            <div class="nameInfo"><span class="name">{{ userdata.username }}</span> <span class="icon">&#xe640;</span> 换绑主管理账号，需要验证当前主管理账号的身份</div>
          </div>
          <div class="item">
            <div>手机号：</div>
            <div><input type="text" :value="userdata.mobile | phoneFormat" class="phoneInput" disabled=""> <span class="getCode" @click="getCode(userdata.mobile)">{{ codeTime }}</span></div>
          </div>
          <div class="item">
            <div>验证码：</div>
            <div><input v-model="code" type="text" class="codeInput" placeholder="请输入"></div>
          </div>
          <div class="item">
            <div class="subItem"><span @click="nextStep">下一步</span></div>
          </div>
        </div>
        <div v-if="step === 2">
          <div class="item">
            <div>当前管理员：</div>
            <div class="nameInfo">
              <el-select :value="value" filterable size="mini" width="255" placeholder="请选择管理员" @change="changeMember">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.username"
                  :value="item"
                />
              </el-select>
            </div>
          </div>
          <div class="item">
            <div>手机号：</div>
            <div><input type="text" :value="phone | phoneFormat" class="phoneInput" placeholder="请先选择管理员" disabled=""> <span class="getCode" @click="getCode(phone, 're')">{{ reCodeTime }}</span></div>
          </div>
          <div class="item">
            <div>验证码：</div>
            <div><input v-model="reCode" type="text" class="codeInput" placeholder="请输入"></div>
          </div>
          <div class="item">
            <div class="subItem"><span @click="changeAdmin">确定</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  filters: {
    phoneFormat(val) {
      if (val) {
        return val.substr(0, 3) + '****' + val.substr(7)
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      code: '',
      codeTime: '获取验证码',
      reCode: '',
      reCodeTime: '获取验证码',
      step: 1,
      loading: false,
      options: [],
      value: '',
      interValTime: '',
      codeData: '',
      phone: ''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'userdata'
    ])
  },

  created() {
    console.log(this.userdata)
  },
  methods: {
    // 获取验证码
    getCode(mobile, st) {
      if (st !== 're') {
        if (mobile && this.codeTime === '获取验证码') {
          this.$store.dispatch('user/getCodeAct', { channel: 2, mobile: mobile, type: 3 }).then((res) => {
            if (res.success) {
              this.codeTime = '60 s'
              this.interValTime = setInterval(() => {
                const num = parseInt(this.codeTime)
                if (num === 1) {
                  this.codeTime = '获取验证码'
                  clearInterval(this.interValTime)
                } else {
                  this.codeTime = num - 1 + ' s'
                }
              }, 1000)
            } else {
              this.$message.error('验证码获取失败！')
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请检查手机号！')
          return false
        }
      } else {
        if (mobile && this.reCodeTime === '获取验证码') {
          this.$store.dispatch('user/getCodeAct', { channel: 2, mobile: mobile, type: 4 }).then((res) => {
            if (res.success) {
              this.reCodeTime = '60 s'
              this.interValTime = setInterval(() => {
                const num = parseInt(this.reCodeTime)
                if (num === 1) {
                  this.reCodeTime = '获取验证码'
                  clearInterval(this.interValTime)
                } else {
                  this.reCodeTime = num - 1 + ' s'
                }
              }, 1000)
            } else {
              this.$message.error('验证码获取失败！')
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请检查手机号！')
          return false
        }
      }
    },
    nextStep() {
      if (this.code.length === 4) {
        this.step = 2
        this.getMemberList()
      } else if (this.code.trim() === '') {
        this.$message.error('请输入验证码')
      } else {
        this.$message.error('验证码错误')
      }
      return
      // if (this.code.trim()) {
      //   this.$store.dispatch('user/getCodeAct', { mobile: this.userdata.mobile, type: 4 }).then((res) => {
      //     if (res.success) {
      //       this.step = 2
      //     } else {
      //       this.$message.error('验证码错误,请重新获取！')
      //     }
      //     this.loading = false
      //   }).catch(() => {
      //     this.loading = false
      //   })
      // } else {
      //   this.$message.error('验证码不能为空')
      // }
    },
    changeMember(val) {
      this.value = val.username
      this.codeData = val
      this.phone = val.mobile
    },
    getMemberList() {
      this.$store.dispatch('organization/getSimMemberAct', { pageSize: 1000, includeSub: 0 }).then((res) => {
        this.options = res.rows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    changeAdmin() {
      if (this.code.trim()) {
        this.$store.dispatch('company/changeCompanyAdminAct', { code: this.reCode, userId: this.codeData.id }).then((res) => {
          if (res.success) {
            this.$message.success('修改成功，请重新登录！')
            setTimeout(() => {
              this.$store.dispatch('user/logout')
              this.$router.push(`/login`)
            }, 1000)
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        }).catch(() => {
          this.$message.error('数据提交失败')
          this.loading = false
        })
      } else {
        this.$message.error('验证码不能为空')
      }
    }
  }
}
</script>

<style lang="scss">
  .setContent {
    .el-input {
      width: 255px;
      height: 40px;
    }
    .el-input--mini .el-input__inner {
      height: 40px;
      line-height: 40px;
    }

  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .topTit {
        line-height: 50px;
      }

      .setContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }

        .cont {
          padding: 15px;

          .item {
            display: flex;
            line-height: 50px;
            margin: 20px 0;

            div:first-child {
              width: 300px;
              text-align: right;
              color: #666;
            }

            div:last-child {
              flex: 1;
            }

            .nameInfo {
              font-size: 14px;
              color: #9b9b9b;

              .name {
                color: #333;
                font-size: 16px;
                margin-right: 10px;
              }
            }

            .phoneInput {
              width: 255px;
              height: 40px;
              background: #f3f3f3;
              border: solid 1px #ccc;
              padding: 3px 10px;
              border-radius: 3px;
            }

            .codeInput {
              width: 255px;
              height: 40px;
              background: #fff;
              border: solid 1px #ccc;
              padding: 3px 10px;
              border-radius: 3px;
            }

            .getCode {
              color: #3345ff;
              cursor: pointer;
              margin-left: 10px;
            }

            .subItem {
              text-align: left !important;

              span {
                position: relative;
                display: inline-block;
                text-align: center;
                width: 110px;
                height: 40px;
                line-height: 40px;
                left: 350px;
                border-radius: 3px;
                background: #3345ff;
                color: #fff;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
</style>
